<script setup lang="ts" name="welfareCenter">
import { ref } from 'vue';
import { useRequest } from 'vue-request';
import { getRedPacketHistory, RedPacketGrabPacket, queryTaskList, receiveBonus, distributionCount } from '/@/apis/userApi';
import { i18nTranslate } from '/@/i18n';
import { NotifyWarn, NotifySuccess, initName } from '/@/utils';
import { useUserId } from '/@/hooks/index';
const { getUserId } = useUserId();
const userId = getUserId();
const tabActive = ref(0);
const keyValue = ref();
const amount = ref(0);
const popup_show = ref(false);
const redPacketList = ref<any[]>([]);
const taskList = ref<any[]>([]);
const totalPeople = ref(0);
const handleClick = (val: any) => {
  tabActive.value = val;
}
const onGet = () => {
  if (!keyValue.value) {
    NotifyWarn(i18nTranslate('Pleaseenterkey'));
    return
  }
  useRequest(RedPacketGrabPacket, {
    defaultParams: [{
      memberId: userId,
      code: keyValue.value,
    }],
    onSuccess(data: any) {
      amount.value = JSON.parse(data).amt;
      keyValue.value = '';
      popup_show.value = true;
    },
  });
}
const onOk = () => {
  popup_show.value = false;
}
useRequest(getRedPacketHistory, {
  onSuccess(data: any) {
    redPacketList.value = data;
  },
});
const taskData = () => {
  useRequest(queryTaskList, {
    defaultParams: [{member: userId}],
    onSuccess(data: any) {
      taskList.value = data;
    },
  })
}
taskData();
const handleReceive = (item: any) => {
  if (item.isCanReceive === 0 || (item.isCanReceive === 1 && item.rewardRecords.isReceiver === 2)) {
    return;
  }
  useRequest(receiveBonus, {
    defaultParams: [{ memberId: userId, taskId: item.id, taskRecordId: item.rewardRecords.id }],
    onSuccess(data: any) {
      NotifySuccess(i18nTranslate('Successful'));
      taskData();
    },
  })
}
useRequest(distributionCount, {
  defaultParams: [{memberId : userId}],
  onSuccess(data: any) {
    totalPeople.value = data.totalPeople;
  },
})
</script>

<template>
  <div class="welfareCenter">
    <AppBar back :primary="true" :title="$t('WelfareCenter')"></AppBar>
    <div class="tab_box">
      <div class="tabs" :class="tabActive === 0 ? 'tabs_active' : ''" @click="handleClick(0)">{{ $t('Drop') }}</div>
      <div class="tabs" :class="tabActive === 1 ? 'tabs_active' : ''" @click="handleClick(1)">{{ $t('Mandatess') }}</div>
    </div>
    <div v-if="tabActive === 0">
      <div class="img_box">
        <img :src="$img('home/reward2.png')" />
      </div>
      <div class="key_box">
        <p>{{ $t('key') }}</p>
        <InputBase v-model="keyValue" class="input_box" />
        <LargePrimaryButton block @click.stop="onGet">{{  $t('Get') }}
        </LargePrimaryButton>
      </div>
      <div class="record_box">
        <p class="record_title">{{ $t('Record') }}</p>
        <div class="flex-between">
          <p class="width30 record_list_title text_l ">{{ $t('Invitee') }}</p>
          <p class="width30 record_list_title">{{ $t('Bonus') }}</p>
          <p class="width40 record_list_title">{{ $t('Time') }}</p>
        </div>
        <div v-if="redPacketList.length" class="record_list_box">
          <div v-for="item in redPacketList" :key="item.id" class="record_list_item flex-between">
            <div class="width30 align-center text_l">
              <div class="avatar_box">
                <img :src="$img('avatar.png')" />
              </div>
              <p class="record_name">{{ item.member ? initName(item.member.phone) : '' }}</p>
            </div>
            <p class="width30 record_money">+{{ item.amt }}</p>
            <p class="width40 reward_time">{{ $YMDHms(item.receiveTime) }}</p>
          </div>
        </div>
        <van-empty v-else :description="$t('Nodata')" />
      </div>
    </div>
    <div v-if="tabActive === 1">
      <div class="img_box2">
        <img :src="$img('home/reward3.png')" />
      </div>
      <div class="record_list_box2">
        <div v-for="item in taskList" :key="item.id" class="record_list_item2 flex-between">
          <div class="width1">
            <p class="p1">${{ item.bonus }}</p>
            <p class="p2">USDT</p>
          </div>
          <div class="width2">
            <p class="p3">{{ $t('Invite') }} {{ item.recommendNum }} {{ $t('activeusers') }}</p>
            <p class="p4">{{ $t('Schedule') }}：<span class="p5">{{ totalPeople }}/{{ item.recommendNum }}</span></p>
          </div>
          <div class="width3">
            <div class="btns" :class="item.isCanReceive === 0 || (item.isCanReceive === 1 && item.rewardRecords.isReceiver === 2) ? 'dis_btn' : ''" @click="handleReceive(item)">{{ $t('Receive') }}</div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model:show="popup_show">
      <div class="popup_box">
        <p class="popup_money"><span class="unit">$</span>{{ amount }}</p>
        <p class="popup_content">{{ $t('Congratulationsonreceivingitsuccessfully') }}</p>
        <LargePrimaryButton block class="popup_btn" @click.stop="onOk">{{  $t('Knew') }}
        </LargePrimaryButton>
      </div>
    </van-popup>
  </div>
</template>
<style lang="scss" scoped>
.welfareCenter {
  height: 100vh;
  overflow-y: auto;
  .tab_box {
    width: 420px;
    margin: 5px auto;
    display: flex;
    justify-content: center;
    border: 1px solid #0063f5;
    border-radius: 20px;
    box-sizing: border-box;
    .tabs {
      width: 50%;
      height: 66px;
      line-height: 66px;
      font-size: 26px;
      color: #0063f5;
      text-align: center;
    }
    .tabs_active {
      background-color: #0063f5;
      color: #ffffff;
      border-radius: 15px;
      border-color: #0063f5;
    }
  }
  .img_box {
    width: 498px;
    height: 293px;
    margin: 30px auto 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .key_box {
    border-radius: 16px;
    box-shadow: 0px 2px 4px 0px rgba(255, 255, 255,0.07);
    background: #242424;
    color: rgba(255, 255, 255, 0.85);
    font-size: 28px;
    margin: 0 30px;
    padding: 38px 27px 30px 24px;
    .input_box {
      margin: 10px 0 25px 0;
    }
  }
  .record_box {
    margin: 30px;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0px 2px 4px 0px rgba(255, 255, 255,0.07);
    background: #242424;
    .record_title {
      color: rgba(255, 255, 255,0.85);
      font-size: 32px;
      font-weight: 700;
    }
    .record_list_title {
      font-size: 28px;
      margin-top: 20px;
    }
    .record_list_box {
      margin-top: 15px;
      .record_list_item {
        font-size: 26px;
        padding: 11px 0;
        border-bottom: 1px solid rgba(255, 255, 255,0.15);;
        .avatar_box {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          margin-right: 8px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .record_money {
          font-size: 26px;
        }
        .record_name {
          word-break: break-all;
        }
        .reward_time {
          color: rgb(102, 102, 102);
          font-size: 24px;
        }
      }
    }
    .width30 {
      width: 30%;
      text-align: center;
    }
    .width40 {
      width: 40%;
      text-align: right;
    }
    .text_l {
      text-align: left;
    }
  }
  .img_box2 {
    width: 438px;
    height: 277px;
    margin: 30px auto 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .record_list_box2 {
    margin: -15px 30px 30px 30px;
    .record_list_item2 {
      border-radius: 20px;
      box-shadow: 0px 4px 30px 0px rgba(54, 41, 183, 0.07);
      background: #242424;
      margin-bottom: 20px;
      padding: 37px 24px 30px 24px;
      .p1 {
        color: #0063f5;
        font-size: 30px;
        font-weight: 700;
      }
      .p2 {
        color: #0063f5;
        font-size: 20px;
        margin-top: 10px;
      }
      .p3 {
        color: rgba(255, 255, 255,0.85);
        font-size: 28px;
        font-weight: 700;
      }
      .p4 {
        color: rgba(255, 255, 255,0.65);
        font-size: 26px;
        margin-top: 10px;
      }
      .p5 {
        color: #0063f5;
        font-size: 26px;
      }
      .btns {
        background-color: #0063f5;
        padding: 14px 20px;
        border-radius: 900px;
        color: #ffffff;
        font-size: 24px;
      }
      .dis_btn {
        background: rgba(255, 255, 255, 0.25) !important;
      }
      .width1 {
        width: 20%;
      }
      .width2 {
        width: 60%;
      }
      .width3 {
        width: 20%;
      }
    }
  }
  .popup_box {
    width: 430px;
    height: 384px;
    background-image: url('/@images/home/reward_bg.png');
    background-size: 100% 100%;
    text-align: center;
    .popup_money { 
      color: #0063f5;
      font-size: 68px;
      padding-top: 75px;
      .unit {
        font-size: 40px;
        margin-right: 10px;
      }
    }
    .popup_content {
      color: rgba(255, 255, 255,0.65);
      font-size: 26px;
      line-height: 32px;
      margin: 25px 50px;
    }
    .popup_btn {
      width: 302px;
      height: 70px;
      margin: 0 auto;
    }
  }
}
</style>
<style lang="scss"> 
.welfareCenter {
  .var-app-bar {
    background-color: #f8f9fa;
  }
  .van-popup {
    background-color: transparent;
  }
  .hl-input-box .var-input .var-field-decorator__controller {
    background: #111111;
  }
}
</style>
